<template>
  <div class="login_box">
    <navigate>扫码注册登录</navigate>
    <!-- 操作方式 -->
    <div class="login_way" v-if="isShowLoginWay">
      <div class="tit">请选择操作方式</div>
      <div class="btn_box">
        <div class="btn" @click="jumpLogin">登录</div>
        <div class="btn" @click="jumpRegister">注册</div>
      </div>
    </div>
    <!-- 注册 -->
    <div class="login_way" v-if="isShowRegisterInfo">
      <div class="tit">请输入注册信息</div>
      <div>
        <van-cell-group class="input_outer">
          <van-field
            v-model="form.name"
            label="*真实姓名"
            placeholder="请输入姓名"
          />
        </van-cell-group>
        <van-cell-group class="input_outer father_relative">
          <van-field
            readonly
            clickable
            v-model="form.label"
            label="*性别"
            placeholder="请选择性别"
            @click="visibleSex = true"
          />
          <v-picker
            :columns="sex"
            valueKey="label"
            @confirm="selectSex"
            :isVisible="visibleSex"
            @cancel="visibleSex = false"
          />
          <img
            src="@/assets/images/common/right.png"
            class="right vertical_center"
            alt=""
          />
        </van-cell-group>
        <van-cell-group class="input_outer">
          <van-field
            v-model="form.age"
            label="年龄"
            type="number"
            placeholder="请输入年龄"
          />
        </van-cell-group>
        <van-cell-group class="input_outer">
          <van-field
            v-model="form.username"
            label="*注册账号"
            placeholder="请输入账号"
          />
        </van-cell-group>
        <van-cell-group class="input_outer">
          <van-field
            v-model="form.password"
            label="*注册密码"
            placeholder="请输入密码"
          />
        </van-cell-group>
      </div>
      <div class="btn mar_top20" @click="toRegister">注册</div>
    </div>
    <!--  登录 -->
    <div class="login_way" v-if="isShowLoginInfo">
      <div class="tit">请输入登录信息</div>
      <div>
        <van-cell-group class="input_outer">
          <van-field
            v-model="form.username"
            label="*账号"
            placeholder="请输入账号"
          />
        </van-cell-group>
        <van-cell-group class="input_outer">
          <van-field
            v-model="form.password"
            label="*密码"
            placeholder="请输入密码"
            type="password"
          />
        </van-cell-group>
        <div class="btn mar_top20" @click="toLogin">登录</div>
      </div>
    </div>
  </div>
</template>

<script>
import { sex } from "@/utils/options.js";
import { mapMutations } from "vuex";
import { scanCodeLogin, login, queryVerifyTaskCode } from "@/api/login";

export default {
  data() {
    return {
      visibleSex: false,
      isShowLoginWay: true,
      isShowLoginInfo: false,
      isShowRegisterInfo: false,
      form: {},
      codeId: "",
      taskId: "",
    };
  },
  computed: {
    sex() {
      return sex;
    },
  },
  created() {
    this.codeId = this.$route.query.id;
    this.getVerifyTaskCode();
  },
  methods: {
    ...mapMutations(["SET_INFO"]),
    async getVerifyTaskCode() {
      let res = await queryVerifyTaskCode({ code: this.codeId });
      if (res.code == 200) {
        this.taskId = res.data;
      } else {
        this.$toast.fail({ message: res.message });
        this.$router.push({ path: "/" });
      }
    },
    //注册
    async toRegister() {
      let par = {
        id: this.taskId,
        username: this.form.username,
        password: this.form.password,
        sex: this.form.sexId,
        name: this.form.name,
        age: this.form.age,
      };
      let res = await scanCodeLogin(par);
      if (res.code == 200) {
        this.isShowLoginWay = true;
        this.isShowLoginInfo = false;
        this.isShowRegisterInfo = false;
        sessionStorage.setItem("token", res.data.token);
        this.SET_INFO(res.data);
        this.$router.push(`/taskList?id=${this.taskId}`);
      }
    },
    //登录
    async toLogin() {
      const params = {
        username: this.form.username,
        password: this.form.password,
      };
      const res = await login(params);
      if (res.code == 200) {
        this.$toast.success({ message: "登录成功！" });
        sessionStorage.setItem("token", res.data.token);
        this.SET_INFO(res.data);
        this.$router.push(`/taskList?id=${this.codeId}`);
      }
    },

    // 选择性别
    selectSex(item) {
      console.log(item, ".>..hhh");
      this.form.sexId = item.id;
      this.form.label = item.label;
      this.visibleSex = false;
    },
    jumpLogin() {
      this.isShowLoginInfo = true;
      this.isShowLoginWay = false;
      this.isShowRegisterInfo = false;
    },
    jumpRegister() {
      this.isShowLoginInfo = false;
      this.isShowRegisterInfo = true;
      this.isShowLoginWay = false;
    },
  },
};
</script>

<style lang="less" scoped>
.mar_top20 {
  margin-top: 20px;
}
.login_box {
  background-color: #f4f6fa;
}
.login_way {
  padding: 30px 20px 0 20px;
}
.tit {
  color: #ff6161;
  font-size: 16px;
  margin-bottom: 40px;
}

.btn {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
  color: #fff;
  font-size: 16px;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.input_outer {
  width: 100%;
}
</style>
